<template>
    <view class="wrap">
        <view class="">
            <u-dropdown @open="open">
                <u-dropdown-item v-model="timeSortVal" title="时间筛选" :options="timeSort" @change="changeSort">
                </u-dropdown-item>
                <!-- <u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item> -->
            </u-dropdown>
        </view>
        <view class="">
            <!-- <view class="content">
                <input type="text" class="" v-model="content" placeholder="骂人不可取">
                <button type="primary" @click="publish()" size="mini">发布</button>
            </view> -->
            <scroll-view class="" scroll-y refresher-enabled enable-flex @refresherrefresh="handleRefresh"
                @scrolltolower="handleTolower()" :refresher-triggered="isRefresh" style="height: calc(100vh - 80rpx);">
                <view class="" v-for="(item,index) in messageList" :key="item._id">
                    <view class="box" :style="[getBgColor(index * Math.floor(Math.random() * 2))]">
                        <view class="title">
                            <image :src="item.avatarUrl" mode=""></image>
                            <text class="name">{{item.nickName}}</text>
                        </view>
                        <view class="text">{{item.content}}</view>
                        <view class="time">{{$u.timeFormat(item.createTime, 'mm月dd日 hh:MM')}}</view>
                    </view>
                </view>
            </scroll-view>
            <view class="toPublish" v-if="showMessage">
                <!-- <u-button shape="circle" iconColor="#31B6C3" @click="showPublish = true"></u-button> -->
                <view class="iconfont icon-tianjia-" @click="showPublish = true">

                </view>
            </view>
        </view>

        <u-popup v-model="showPublish" @close="closePopup" @open="openPopup" mode="bottom" border-radius="10"
            safe-area-inset-bottom negative-top="200">
            <view class="publish">
                <view class="publish_content">
                    <!-- <input placeholder="两人一句三冬暖" border="surround" clearable v-model="content" /> -->
                    <textarea v-model="content" maxlength="200" auto-height style="width: 100%;"
                        placeholder="两人一句三冬暖，恶语伤人六月寒" :show-confirm-bar="false"></textarea>
                </view>

                <view class="publish_btn">
                    <button class="btn" type="primary" @click="publish()">发布</button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import {
        mapGetters
    } from 'vuex';
    import * as cloudApi from '@/utils/cloudApi.js'
    export default {
        data() {
            return {
                timeSortVal: 1,
                value2: 2,
                showPublish: false,
                isRefresh: false, // 标示scroll-view下拉刷新是否被触发
                timeSort: [{
                        label: '升序',
                        value: 'asc',
                    },
                    {
                        label: '降序',
                        value: 'desc',
                    }
                ],
                options2: [{
                        label: '去冰',
                        value: 1,
                    },
                    {
                        label: '加冰',
                        value: 2,
                    },
                ],
                content: '',
                messageList: [],
                userInfo: {},
                showMessage: true,
                disabled: true
            }
        },
        onLoad() {
            this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
            cloudApi.call({
                name: 'Message-Board',
                data: {
                    api: 'show'
                },
                success: (res) => {
                    this.showMessage = res.result.data[0].type
                    console.log(res.result.data[0].type);
                }
            })
            this.getMessageList('desc')
        },
        onShow() {
            this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
        },
        computed: {
            ...mapGetters('common', ['getBgColor']),
        },
        watch: {

        },
        methods: {
            openPopup() {
                // console.log('open');
            },
            closePopup() {
                this.showPublish = false
                // console.log('close');
            },
            open(index) {},
            changeSort(index) {
                console.log(index);
                this.getMessageList(index)
            },
            publish() {
                // 发布内容需要登录
                // if (this.userInfo.token === undefined) return this.$showToast('请先登录', 'none')
                if (!this.content) return this.$showToast('留言内容不能为空哦', 'none')
                cloudApi.call({
                    name: "Message-Board",
                    data: {
                        api: 'publish',
                        content: this.content,
                        userInfo: this.userInfo
                    },
                    success: (res) => {
                        console.log(res);
                        // this.messageList.unshift({
                        //     _id: res.result.id,
                        //     content: this.content
                        // })
                        this.content = ''
                        this.getMessageList('desc')
                        this.showPublish = false
                    }
                })
            },
            getMessageList(sort) {
                cloudApi.call({
                    name: "Message-Board",
                    data: {
                        api: 'getMessage',
                        sort
                    },
                    success: (res) => {
                        console.log(res + 'getmessage');
                        this.messageList = res.result.data
                        this.isRefresh = false
                    }
                })
            },
            handleTolower() { // 自定义上拉加载

            },
            handleRefresh() { // 下拉刷新
                uni.showLoading({
                    title: '正在刷新'
                })
                setTimeout(() => {
                    this.getMessageList('desc')
                    this.$showToast('刷新成功', 'none')
                }, 1000)
                this.isRefresh = true
            },
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        display: flex;
        align-items: center;
        margin: 20rpx 40rpx;

        input {
            border-bottom: 1px solid #ccc;
            padding: 6rpx;
            flex: 1;
        }
    }

    .box {
        margin: 10rpx 40rpx;
        padding: 20rpx;

        border-radius: 30rpx;

        .title {
            display: flex;
            align-items: center;

            image {
                width: 100rpx;
                height: 100rpx;
                border: 5rpx solid #fff;
                border-radius: 50%;
                margin-right: 20rpx;
            }

            .name {
                color: #ff6773;
                font-weight: bold;
                font-size: 40rpx;
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 40vw;
            }
        }

        .text {
            padding: 30rpx 40rpx;

        }

        .time {
            margin-top: 10rpx;
            font-size: 24rpx;

        }
    }

    .toPublish {
        position: fixed;
        bottom: 5vh;
        right: 5vh;

        width: 100rpx;
        height: 100rpx;
        background-color: #0081ff;
        border-radius: 20%;
        line-height: 100rpx;

        .iconfont {
            font-size: 50rpx;
            color: #fff;
            text-align: center;
        }
    }

    .publish {
        padding: 40rpx 30rpx 20rpx;
        margin: 40rpx;

        .publish_content {
            display: flex;
            padding: 20rpx;
            text-align: center;
            border: 1rpx solid #ccc;
            border-radius: 20rpx;
        }

        .publish_btn {
            padding-top: 20rpx;

            .btn {
                background-color: #60C5BA;
                color: #fff;
                font-weight: bold;
            }
        }
    }
</style>
